<template>
  <div class="ButtonTable">
    <HEditTable :columns="column" v-model:data="rawData" :showAllEdit="true" :isEdit="false">
      <template #title>
        <div class="mb-2">
          <a-button type="primary" @click="handleAdd">新增</a-button>
          <a-button danger class="ml-2" @click="handleDelMutil">删除</a-button>
        </div>
      </template>
      <template #action="{ index }">
        <a-button type="link" class="!mx-1 !px-0" @click.stop="handleDel(index)">删除 </a-button>
      </template>
    </HEditTable>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, onMounted } from 'vue';
  import { HEditTable, EditColumn } from '/@/components/HEditTable';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { BtnTypeList, BtnShapeList } from '../consts';
  import { cloneDeep } from 'lodash-es';

  const permissionList = [
    {
      label: '显示',
      value: '1',
    },
    {
      label: '隐藏',
      value: '0',
    },
  ];

  const locationList = [
    {
      label: '项目区',
      value: 'item',
    },
    {
      label: '操作区',
      value: 'action',
    },
  ];

  const eventList = [
    {
      label: '新增',
      value: 'add',
    },
    {
      label: '编辑',
      value: 'edit',
    },
    {
      label: '删除',
      value: 'del',
    },
  ];
  const defBtn = [
    {
      label: '新增',
      eventType: 'add',
      IconPicker: '',
      type: 'primary',
      location: 'item',
      permission: '1',
    },
    {
      label: '编辑',
      eventType: 'edit',
      IconPicker: '',
      type: 'default',
      location: 'action',
      permission: '1',
    },
    {
      label: '删除',
      eventType: 'del',
      IconPicker: '',
      type: 'default',
      permission: '1',
      location: 'action',
    },
  ];

  export default defineComponent({
    name: 'ButtonTable',
    components: {
      HEditTable,
    },
    props: ['data'],
    emits: ['update:data'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();
      const rawData = computed({
        get() {
          return props.data;
        },
        set(v) {
          emit('update:data', v);
        },
      });

      onMounted(() => {
        const data = props.data || cloneDeep(defBtn);
        rawData.value = data;
      });

      const column: EditColumn[] = [
        {
          label: '按钮名称',
          dataIndex: 'label',
          component: 'Input',
          class: 'w-49',
          componentProps: {
            placeholder: '请输入名称',
          },
        },
        {
          label: '权限',
          class: 'w-37',
          dataIndex: 'permission',
          component: 'RadioGroup',
          componentProps: {
            options: permissionList,
          },
          format(v) {
            const info = permissionList.find((el) => el.value === v);
            if (info) return info.label;
            return v;
          },
        },
        {
          label: '事件类型',
          dataIndex: 'eventType',
          component: 'Select',
          class: 'w-25',
          componentProps: {
            options: eventList,
            placeholder: '请选择事件类型',
          },
          format(v) {
            const info = eventList.find((el) => el.value === v);

            if (info) return info.label;
            return v;
          },
        },
        {
          label: '按钮位置',
          dataIndex: 'location',
          component: 'Select',
          class: 'w-25',
          componentProps: {
            options: locationList,
            placeholder: '请选按钮位置',
          },
          format(v) {
            const info = locationList.find((el) => el.value === v);
            if (info) return info.label;
            return v;
          },
        },
        {
          dataIndex: 'type',
          label: '按钮类型',
          required: false,
          component: 'Select',
          class: 'w-30',
          componentProps: {
            options: BtnTypeList,
            getPopupContainer: () => document.body,
          },
          format(v) {
            const info = BtnTypeList.find((el) => el.value === v);
            if (info) return info.label;
            return v;
          },
        },
        {
          dataIndex: 'shape',
          label: '按钮形状',
          required: false,
          component: 'Select',
          class: 'w-25',
          componentProps: {
            options: BtnShapeList,
            placeholder: '请选择按钮形状',
            getPopupContainer: () => document.body,
          },
          format(v) {
            const info = BtnShapeList.find((el) => el.value === v);
            if (info) return info.label;
            return v;
          },
        },
        {
          dataIndex: 'icon',
          label: '图标',
          component: 'IconPicker',
          class: 'icon-box w-15',
          componentProps: {
            width: '35px',
            placeholder: '请选择图标',
          },
        },
        {
          dataIndex: '',
          label: '操作',
          slot: 'action',
          class: 'w-20',
        },
      ];

      const handleAdd = async () => {
        // rawData.value = rawData.value.concat(newDataInexs);
        const item = {
          label: '',
          eventType: 'add',
          icon: '',
          permission: '1',
          type: 'default',
        };
        rawData.value.push(item);
        createMessage.success('操作成功');
      };

      const handleDelMutil = () => {
        const arr = rawData.value || [];
        const data = arr.filter((el) => el.check);
        if (!data.length) {
          createMessage.warn('请先选择要删除的列', 0.8);
          return;
        }

        rawData.value = arr.filter((el) => !el.check);
      };
      const handleDel = (index) => {
        rawData.value.splice(index, 1);
      };
      return {
        column,
        rawData,
        handleAdd,
        handleDelMutil,
        handleDel,
      };
    },
  });
</script>
<style lang="less" scoped>
  .ButtonTable {
    ::v-deep(.icon-box) {
      .ant-input-group-wrapper {
        vertical-align: -0.8em;
      }
    }
  }
</style>
